<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="条目" min-width="20">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="数值" min-width="30" align="left">
      <template slot-scope="scope">
        <el-progress :percentage="toPercent(scope.row.data.total, scope.row.data.used)" :format="format(scope.row.data.total, scope.row.data.used)" />
      </template>
    </el-table-column>
    <el-table-column label="状态" min-width="30" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.data | statusFilter">
          {{ row.data | statusFilterStr }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapGetters } from 'vuex'
import { getZwmpUsage } from '@/api/resource'
import { Message } from 'element-ui'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/resize'
import { toPercentData } from '@/utils/index.js'

export default {
  components: {},
  filters: {
    statusFilter(data) {
      const percent = toPercentData(data.total, data.used)
      if (percent > 80) {
        return 'danger'
      } else if (percent > 60) {
        return 'warning'
      } else {
        return 'success'
      }
    },
    statusFilterStr(data) {
      const percent = toPercentData(data.total, data.used)
      if (percent > 80) {
        return '资源即将不足'
      } else if (percent > 60) {
        return '资源使用率较高'
      } else {
        return '资源空闲'
      }
    }
  },
  mixins: [resize],
  props: {
    module: {
      type: Number,
      require: true,
      default() {
        return 0
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '310px'
    }
  },
  data() {
    return {
      data: [],
      list: []
    }
  },
  computed: {
    ...mapGetters(['name', 'roles'])
  },
  created() {
  },
  mounted() {
    this.getZwmpData(this.module)
  },
  methods: {
    toPercent(total, used) {
      return toPercentData(total, used)
    },
    format(total, used) {
      return () => {
        return used + '/' + total
      }
    },
    getZwmpData(module) {
      getZwmpUsage(module)
        .then((response) => {
          this.list = []
          this.data = JSON.parse(response.data.result)
          let item = { name: '会议资源', data: { total: this.data.conf.total, used: this.data.conf.used }}
          this.list.push(item)
          item = { name: '呼叫资源', data: { total: this.data.call.total, used: this.data.call.used }}
          this.list.push(item)
          item = { name: '音频通道资源', data: { total: this.data.audiochan.total, used: this.data.audiochan.used }}
          this.list.push(item)
          item = { name: '视频通道资源', data: { total: this.data.videochan.total, used: this.data.videochan.used }}
          this.list.push(item)
          let audioport_total = 0
          let audioport_used = 0
          let videoport_total = 0
          let videoport_used = 0
          let webrtcport_total = 0
          let webrtcport_uesd = 0
          this.data.ports.forEach(function(i) {
            audioport_total += i.audioport.total
            audioport_used += i.audioport.used
            videoport_total += i.videoport.total
            videoport_used += i.videoport.used
            webrtcport_total += i.webrtcport.total
            webrtcport_uesd += i.webrtcport.used
          })
          item = { name: '音频端口资源', data: { total: audioport_total, used: audioport_used }}
          this.list.push(item)
          item = { name: '视频端口资源', data: { total: videoport_total, used: videoport_used }}
          this.list.push(item)
          item = { name: 'WebRTC端口资源', data: { total: webrtcport_total, used: webrtcport_uesd }}
          this.list.push(item)
        })
        .catch((error) => {
          Message.error(error)
        })

      const timer = setInterval(() => {
        getZwmpUsage(module)
          .then((response) => {
            this.list = []
            this.data = JSON.parse(response.data.result)
            let item = { name: '会议资源', data: { total: this.data.conf.total, used: this.data.conf.used }}
            this.list.push(item)
            item = { name: '呼叫资源', data: { total: this.data.call.total, used: this.data.call.used }}
            this.list.push(item)
            item = { name: '音频通道资源', data: { total: this.data.audiochan.total, used: this.data.audiochan.used }}
            this.list.push(item)
            item = { name: '视频通道资源', data: { total: this.data.videochan.total, used: this.data.videochan.used }}
            this.list.push(item)
            let audioport_total = 0
            let audioport_used = 0
            let videoport_total = 0
            let videoport_used = 0
            let webrtcport_total = 0
            let webrtcport_uesd = 0
            this.data.ports.forEach(function(i) {
              audioport_total += i.audioport.total
              audioport_used += i.audioport.used
              videoport_total += i.videoport.total
              videoport_used += i.videoport.used
              webrtcport_total += i.webrtcport.total
              webrtcport_uesd += i.webrtcport.used
            })
            item = { name: '音频端口资源', data: { total: audioport_total, used: audioport_used }}
            this.list.push(item)
            item = { name: '视频端口资源', data: { total: videoport_total, used: videoport_used }}
            this.list.push(item)
            item = { name: 'WebRTC端口资源', data: { total: webrtcport_total, used: webrtcport_uesd }}
            this.list.push(item)
          })
          .catch((error) => {
            Message.error(error)
          })
      }, 3 * 1000)

      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once('hook:beforeDestroy', () => {
        console.log('清除定时器')
        clearInterval(timer)
      })
    }
  }
}
</script>

<style lang="scss" >
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
  .el-card__body {
    padding: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.55);
    font-size: medium;
    font-weight: bold;
    margin-top: 14px;
    margin-left: 14px;
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    div {
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      margin: auto;
    }
  }

  .el-main {
    // background-color: #e9eef3;
    color: #333;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    vertical-align: middle;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: none;
    }
  }
}
</style>
